<template>
  <div class="preview-paper">
    <div class="paper-name fx">{{ options.i + 1 }}. <span v-html="options.name"></span></div>
    <ul class="list">
      <li class="list-item">
        <div class="item" v-for="(item, i) in data" :key="i">
          <div>{{ map[i] }}. {{ item }}</div>
        </div>
        <div class="answer">
          <div class="ans">正确答案: {{options.ans.toUpperCase()}}</div>
          <div class="analysis">
            解析: {{options.analysis ? options.analysis : "无"}}
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["data", 'options'],
  data() {
    return {
      map: {
        0: "A",
        1: "B",
        2: "C",
        3: "D",
        4: "E",
        5: "F",
        6: "G",
        7: "H",
        8: "I",
        9: "J",
        10: "K",
      },
    };
  },
};
</script>

<style scoped lang="scss">
.preview-paper {
  line-height: 1.5;
  margin: 28px 0;
}

.paper-name {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

.name {
  font-size: 17px;
}

.item {
  margin: 20px 0;
}

.answer {
  margin-top: -10px;
  font-size: 15px;
}

.analysis {
  color: #333;
}

.ans {
  color: green;
}


</style>
